<template>
  <div class="stepSlect">
    <ul>
      <li v-for="(item, index) in options" :key="index">
        <div
          class="stepSlect-item"
          @click="handleClick(item)"
          :class="modelValue == item.value ? 'active' : ''"
        >
          <div class="title">
            {{ item.name }}
          </div>
        </div>
        <p class="stepSlect-info">
          {{ item.info }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "stepSlect",
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    modelValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  mounted() {},
  methods: {
    handleClick(item) {
      console.log(item);
      this.modelValue = item.value;
    },
  },
};
</script>
<style lang="scss" scoped>
.stepSlect {
  ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  &-item {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;

    background: #F8F8F8;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    color: #5D5F62;
    overflow: hidden;
    .title {
      position: relative;
      z-index: 2;
      font-size: 14px;

    }
    transition: all 0.5s;
    // &:hover {
    //   background-image: linear-gradient(
    //     to right,
    //     rgba(56,120,255,0.1),
    //     rgba(56,120,255,0.1)
    //   );
    //   width: 100%;
    // }
    &::after {
      border-radius: 50%;
      content: "";
      left:50%;
      top:50%;
      height: 300px;
      width: 300px;
      transform: translate(-50%,-50%) scale(0);
      
      position: absolute;
      transition: all 0.5s;
      background: #F8F8F8;
      // background-image: linear-gradient(
      //   to right,
      //   rgba(56,120,255,0.1),
      //   rgba(56,120,255,0.1)
      // );
    }
    &.active {
      &::after {
        transform: translate(-50%,-50%) scale(1);
        background-color: rgba(56,120,255,0.1);

        
      }
      .title{
        color: var(--base-color);
        font-weight: bold;
      }
      border-color: var(--base-color);

    }
  }
  &-info {
    font-size: 12px;
    color: #888;
    margin-top: 20px;
    line-height: 2;
  }
}
</style>
